<template>
  <div>
    <el-button class="btn-back" @click="back" type="text">返回</el-button>
    <div ref="chart" class="mapCls"></div>
  </div>
</template>

<script>
import { MapDrillDown } from './js/echartMapOptions.js';
export default {
  name: 'echartMapShow',
  data: function () {
    return {
      map: undefined,
    };
  },
  mounted() {
    this.map = new MapDrillDown(this.$refs.chart, this);
    this.map.init();
  },
  methods: {
    back() {
      this.map.back();
    },
  },
};
</script>

<style scoped>
.btn-back {
  /* position: fixed; */
  /* float: right; */
  /* display: flex; */
  /* left: 10px; */
  /* top: 10px; */
  /* z-index: 1; */
  /* border: 0; */
  /* width: 100px; */
  /* height: 40px; */
  /* color: green; */
  /* background-color: white; */
}
.mapCls {
  width: 100%;
  height: 500px;
  background-image: url(./bg.png);
  /* background-size: 100% 100%; */
  /* background-repeat: no-repeat; */
}
</style>
